<style scoped >
    /* login */
    .m-login { padding-top: 0.40rem; }
    .m-login .m-login-noActionbar { padding-top: 0; }
    .m-login .m-login-form { background-color: #fff; margin: 0.15rem 0.10rem 0; position: relative; z-index: 2; }
    .m-login .m-login-form .w-form-item { border: 0.01rem solid #D5D5D5; height: 0.45rem; font-size: 0.14rem; line-height: 0.45rem; margin:0; border-bottom-width: 0;}
    .m-login .m-login-form .w-form-item:first-child{border-radius: 0.03rem 0.03rem 0 0;}
    .m-login .m-login-form .w-form-item:last-child{border-radius: 0 0 0.03rem 0.03rem; border-bottom-width:1px;}
    .m-login .m-login-form-account { -webkit-border-top-left-radius: 0.03rem; -moz-border-radius-topleft: 0.03rem; border-top-left-radius: 0.03rem; -webkit-border-top-right-radius: 0.03rem; -moz-border-radius-topright: 0.03rem; border-top-right-radius: 0.03rem; margin: 0; margin-bottom: -1px; }
    .m-login .m-login-form-password { -webkit-border-bottom-left-radius: 0.03rem; -moz-border-radius-bottomleft: 0.03rem; border-bottom-left-radius: 0.03rem; -webkit-border-bottom-right-radius: 0.03rem; -moz-border-radius-bottomright: 0.03rem; border-bottom-right-radius: 0.03rem; margin: 0; }
    .m-login .m-login-form .w-form-name { width: 0.62rem; }
    .m-login .m-login-form .w-input-input { border-width: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 0.14rem; padding: 0; width: 220px; font-size: 0.14rem; }
    .m-login .m-login-form .w-input-placeholder { padding: 0; }
    .m-login .m-login-submit { margin: 0.15rem 0.10rem 0.10rem; }
    .m-login .m-login-submit .w-button { width: 100%; height: 0.40rem; line-height: 0.40rem; font-size: 0.16rem; }
    .m-login .m-login-link { margin: 0 0.10rem; line-height: normal; position: relative; +zoom: 1; }
    .m-login .m-login-link .aside { position: absolute; right: 0; top: 0; }
    .m-login .m-login-form .w-inputBar { padding: 0; }
    .m-login .m-login-form .w-bar-label { width: 0.74rem; text-align: right; }
    .m-login .m-login-form .w-bar-control { margin-right: 0.10rem; }
    .m-login .m-login-msg { text-align: center; }
    .m-login .m-login-menu { position: absolute; background: #fff; width: 100%; top: 0.46rem; left: 0; }
    .m-login .m-login-menu .item { border: 1px solid #D5D5D5; margin-bottom: -1px; height: 0.44rem; line-height: 0.44rem; padding-left: 0.62rem; padding-right: 0.10rem; }
    .m-login .m-login-menu .item .inner { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
    .m-login .m-login-tips-bottom { margin-left: 0.10rem; margin-top: 0.15rem; }
    .m-login .m-login-extLogin { margin-top: 0.20rem; padding: 0 0.10rem; font-size: 0.12rem; }
    .m-login .m-login-extLogin .hd { margin-bottom: 0.25rem; border-bottom: 1px solid #ddd; text-align: center; }
    .m-login .m-login-extLogin .hd span { position: relative; top: 0.10rem; display: inline-block; padding: 0 0.10rem; background: #f7f7f7; color: #3d3d3d; }
    .m-login .m-login-extLogin .bd { text-align: center; }
    .m-login .m-login-extLogin .bd .m-login-extLogin-item { display: inline-block; margin: 0 0.15rem; text-align: center; line-height: 0.26rem; color: #666; }
    .w-bar-control {
        overflow: hidden;
        position: relative;
    }
</style>

<template>
    <header-component></header-component>
    <div class="m-login">
        <form id="loginForm" onsubmit="return false;">
            <div class="m-login-form w-form">
                <div class="w-form-item m-login-form-account w-inputBar w-bar">
                    <div class="w-bar-label">帐号：</div><a href="javascript:;" class="w-bar-input-clear">×</a>
                    <div class="w-bar-control">
                        <input placeholder="请输入手机号码" v-model="phone" autocapitalize="off" class="w-bar-input" type="tel" name="phone" pattern="[0-9]*">
                    </div>
                </div>
                <div class="w-form-item m-login-form-password w-inputBar w-bar">
                    <div class="w-bar-label">密码：</div><a href="javascript:;" class="w-bar-input-clear">×</a>
                    <div class="w-bar-control">
                        <input placeholder="请输入新密码" v-model="password" autocapitalize="off" class="w-bar-input" type="password" name="password">
                    </div>
                </div>
            </div>
            <div class="m-login-submit">
                <button class="w-button w-button-main" @click="login">登 录</button>
            </div>
            <!--<div class="m-login-link">-->
                <!--<a>关注公众号直接获得账号</a>-->
                <!--<a href="javascript:;" data-href="?c=forget" class="aside">忘记密码？</a>-->
            <!--</div>-->
            <div class="m-login-link">
                <p style="font-size: 14px;opacity: 0.4;letter-spacing: 1px">提示：微信登录用户刷新页面即可登录</p>
            </div>
        </form>
    </div>

    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" :delay="delay">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>
</template>

<script>
    import HeaderComponent from '../components/header'
    import User from '../module/user'
    import pop from '../components/pop'
    //    import Config from '../config/config'

    export default{
        data(){
            return{
                phone:'',
                password:'',
                statusPop:false,
                statusToast:false,
                delay:2000,
                msg:'',  //弹窗文案
            }
        },
        created(){
            this.$dispatch('isLoading',true)
        },
        ready(){
            if(User.isLogin) this.$router.replace('/user');
//            else window.location.href = Config.apiDomain+'/weixin/siteAuth'+location.search;

            this.$dispatch('isLoading',false)
        },
        components:{
            'header-component': HeaderComponent,
            pop
        },
        methods:{
            async login(){
                console.log(this.phone)
                console.log(this.phone == '')

                if(this.phone == ''){
                    this.statusToast = true
                    this.msg = '请输入手机号码'
                    return false;
                }else if(!(/^1[3|4|5|6|7|8]{1}\d{9}$/.test(this.phone))){
                    this.statusToast = true
                    this.msg = '手机号码格式错误'
                    return false;
                }else if(this.password == ''){
                    this.statusToast = true
                    this.msg = '请输入密码'
                    return false;
                }

                let res = await User.login(this.phone,this.password)

                if(!!res.loginFail){
                    this.statusPop = true
                    this.msg = res.data
                }
                else{
                    this.$router.go({path:'user'})
                }
            }
        }
    }
</script>
